var listArr = [{
    'eleId': '01',
    eleName: '测试公司'
}, {
    'eleId': '02',
    eleName: '出纳测试公司1'
}, {
    'eleId': '03',
    eleName: '期间设置公司'
}, {
    'eleId': '04',
    eleName: '演示公式'
}, {
    'eleId': '05',
    eleName: '公司11'
}, {
    'eleId': '06',
    eleName: 'HFY测试公司'
}, {
    'eleId': '07',
    eleName: '测试公司2'
}, {
    'eleId': '08',
    eleName: '中餐饮有限公司'
}, {
    'eleId': '09',
    eleName: '烤匠烤鱼餐厅'
}, {
    'eleId': '10',
    eleName: '呷哺呷哺北京1'
}, {
    'eleId': '11',
    eleName: '呷哺呷哺北京2店'
}, {
    'eleId': '12',
    eleName: '呷哺呷哺北京3店'
}, {
    'eleId': '13',
    eleName: '肯德基'
}, {
    'eleId': '14',
    eleName: '麦当劳'
}, {
    'eleId': '15',
    eleName: '必胜客'
}, {
    'eleId': '16',
    eleName: '麦当劳222'
}, ]
$(function() {
    // sn的关键字模糊搜索和输入框的点击获取列表事件
    $("#filterName").on({
            // 键盘的输入事件
            keyup: function() {
                // console.log($(this).val().trim());
                // 如果复选框选中
                if ($('#checkbox').is(':checked')) {
                    // 判断用户输入的文本是否符合规则
                    if ($(this).val().trim().length > 1 && $(this).val().trim().length < 4) {
                        $("#shoulist li")
                            .hide()
                            .filter(`:contains(${$(this).val()})`)
                            .show();
                    } else {
                        $(this).html('')
                        $("#shoulist li").show()
                    }
                }
            },
            // 输入框获取焦点的事件
            focus: function() {
                if ($('#shoulist li').length === 0) {
                    $.each(listArr, function(index, item) {
                        var divstr = '<li id=' + item.eleId + '>' + item.eleName + '</li>'
                        $('#shoulist').append(divstr)
                    })
                    $('#shoulist').css('display', 'block')
                    console.log($('#shoulist li').length);
                }
            },
        })
        // pn的搜索事件
    $('#pn_list').on('focus', function() {
            if ($('#showpn_list li').length === 0) {
                $.each(listArr, function(index, item) {
                    var divstr = '<li id=' + item.eleId + '>' + item.eleName + '</li>'
                    $('#showpn_list').append(divstr)
                })
                $('#showpn_list').css('display', 'block')
                console.log($('#showpn_list li').length);
            }
        })
        // 点击下拉框，将文本赋值给输入框
    const assign = function(val1, val2) {
            $(val1).on('click', 'li', function() {
                $(val2).val($(this).text())
                $(val1).css('display', 'none')
                $(val1).html('')
            })
        }
        // sn 输入框的下拉框文本赋值
    assign('#showpn_list', "#pn_list")
        // pn 输入框的下拉框文本赋值
    assign('#shoulist', "#filterName")

    // 点击下拉框外面，隐藏下拉框
    const HideDropdown = function(id1, id2) {
            $(document).on('click', function(e) {
                var e = e || window.event
                var target = e.target || e.srcElement
                console.log(target);
                while (target) {
                    if (target.id && target.id == id1 || target.id == id2) {
                        return
                    }
                    target = target.parentNode
                }
                $('#' + id2).css('display', 'none')
                $('#' + id2).html('')
            })
        }
        // sn的下拉框隐藏
    HideDropdown('filterName', 'shoulist')
        // pn的下拉框隐藏
    HideDropdown('pn_list', 'showpn_list')

})